<template>
<el-header>/我的会议
</el-header>
  <el-main>
    <el-space direction="vertical">
      <el-card style="width: 1200px">我主持的会议
        <el-row class="header" :gutter=20>
            <el-col :span=7>
            <el-input placeholder="请输入Id" clearable v-model="queryHostForm.meetingId">
            </el-input>
            </el-col>
            <el-button type="primary" :icon="Search" @click="loadHostData">查找</el-button>
            <el-button type="primary" @click="handleDialogValue()">添加会议</el-button>
        </el-row>
        <el-table :data="tableHostData" style="width: 100%;">
            <el-table-column :prop="item.prop" :label="item.lable" v-for="(item,index) in options" :key="index" :width="item.width">
            <template #default="{row}" v-if="item.prop === 'participants'">
                    <el-button size="small" @click="participantsSearch(row)">查看人员</el-button>

            </template>
            <template #default="{row}" v-if="item.prop === 'action'">
                    <el-button size="small" @click="handleDialogValue(row)">编辑</el-button>
                    <el-button size="small" @click="handleDelete(row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-card style="width: 1200px">我参加的会议
        <el-row class="header" :gutter=20>
            <el-col :span=7>
            <el-input placeholder="请输入Id" clearable v-model="queryJoinForm.meetingId">
            </el-input>
            
            </el-col>
            <el-button type="primary" :icon="Search" @click="loadJoinData">查找</el-button>

        </el-row>
        <el-table :data="tableJoinData" style="width: 100%">
            <el-table-column :prop="item.prop" :label="item.lable" v-for="(item,index) in commonoption" :key="index">
                <template #default="{row}" v-if="item.prop === 'participants'">
                    <el-button size="small" @click="participantsSearch(row)">查看人员</el-button>

            </template>
            </el-table-column>
            
        </el-table>
     

        
    </el-card>
    </el-space>
    
  
  </el-main>
  <Dialog 
    v-model="dialogVisible" 
    :dialogTitle="dialogTitle" 
    v-if="dialogVisible" 
    @initMeetingList="loadHostData()" 
    :dialogTableValue="dialogTableValue"
  />
  
  <DialogTable 
    v-model="dialogTableVisible" 
    :dialogTitle="dialogTitle" 
    v-if="dialogTableVisible" 
    @initMeetingList="loadHostData()" 
    :dialogTableValue="dialogTableValue"
  />

</template>



<script setup>

import { ref } from 'vue'
import { $meetingSearch,$meetingDelete ,$myHostMeetingSearch,$myJoinMeetingSearch} from "../../api/meetingapi.js";
import {options} from './options'
import {options as commonoption} from './commonoption'
import { Search} from '@element-plus/icons-vue'
import Dialog from './component/mydialog.vue'
import DialogTable from './component/diaUserSearch.vue'
import { ElMessage ,ElMessageBox} from 'element-plus'

const storedUserID = localStorage.getItem('userID');
//console.log('User ID:', storedUserID);
const queryHostForm = ref({
  meetingId:'',
});
const queryJoinForm = ref({
  meetingId:'',
});
const form = ref({
  meeting_id: storedUserID,
  meetingroom_id: "",
  meeting_state: "",
  meeting_pnumber: "",
  meeting_npnumber: "",
  meeting_stime: new Date(),
  meeting_etime: new Date(),
  meeting_date: "",
});

const tableHostData =ref([]) 
const tableHostDataS =ref([]) 
const tableJoinData =ref([]) 
const tableJoinDataS =ref([]) 
const dialogTableVisible = ref(false)
const dialogTableTitle=ref('')
//let dialogUserTableValue=ref({})
const dialogVisible=ref(false)
const dialogTitle=ref('')
let dialogTableValue=ref({})

const loadHostData = async () => {
	  
    tableHostData.value=tableHostDataS.value;
    console.log(queryHostForm.value,"loadHostData");
    const test1={...queryHostForm.value};
    console.log(test1,"loadHostData");
    if(test1.meetingId==""){
        const res = await $myHostMeetingSearch({userId:storedUserID}) 
        console.log(res.data,"loadHostData");
        tableHostData.value=res.data;
        tableHostDataS.value=res.data;
    
    }else{
        console.log(queryHostForm.value,"loadHostData");
        tableHostData.value=tableHostData.value.filter(item=>item.meetingId==test1.meetingId)        
        }

}
loadHostData()
const loadJoinData = async () => {
	  
    
   

    tableJoinData.value=tableJoinDataS.value;
    console.log(queryJoinForm.value,"loadJoinData");
    const test1={...queryJoinForm.value};
    console.log(test1,"loadJoinData");
    if(test1.meetingId==""){
        const res = await $myJoinMeetingSearch({userId:storedUserID}) 
        console.log(res,"loadJoinData");
        tableJoinData.value=res.data;
        tableJoinDataS.value=res.data;
    
    }else{
        console.log(queryJoinForm.value,"loadJoinData");
        tableJoinData.value=tableJoinData.value.filter(item=>item.meetingId==test1.meetingId)        
    }
}
loadJoinData()
const participantsSearch=(row)=>{
  
    if(row==null){
    }else{

        dialogTitle.value=row.meetingId+'会议的相关人员'
        dialogTableVisible.value=true
        //console.log(JSON.stringify({meetingId:row.meetingId}))
        dialogTableValue=JSON.parse(JSON.stringify({meetingId:row.meetingId}))
        console.log(dialogTableValue)
        //dialogUserTableValue=JSON.parse(JSON.stringify(row.meeting_id))
       
        //console.log(dialogUserTableValue)
    }
}
const handleDialogValue =(row)=>{
    
    if(row==null){
        dialogTitle.value='添加会议'
        dialogVisible.value=true
        dialogTableValue={}
    }else{
        dialogTitle.value='编辑会议'
        dialogVisible.value=true
        dialogTableValue=JSON.parse(JSON.stringify(row))
        console.log(dialogTableValue)
    }
    
    //dialogTableValue={}
}


const handleDelete =(row)=>{
    //
    ElMessageBox.confirm(
    '你确定要删除这条数据吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      //  console.log(row.meetingroom_id,"row")
 
      let meetingDelete =  await $meetingDelete(row)
      
      if(meetingDelete.data=='删除会议成功'){
        //console.log(w,"w")
        ElMessage({
        type: 'success',
        message: '删除成功',
        })
      }else{
        ElMessage({
        type: 'error',
        message: '删除失败',
        })
      }
      
      loadHostData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}

</script>

<style lang="scss" scoped>
.header{
    padding-bottom: 16px;
    box-sizing: border-box;
}
.action{
    
}
</style>